//评论导航跳转
function commentPage(startIndex,size) {
    let msg=$('#searchComment').val();
    if (msg==undefined){
        msg='';
    }
    $.ajax({
        url:'/admin/commentPage',
        type:'get',
        data: {startIndex:startIndex,size:size,str:msg},
        dataType:'json',
        success:(res)=>{
            console.log(res);
            //准备渲染表单
            let str=``;
            let list=res.data.records;
            for (let i=0;i<list.length;i++){
                let time=''+list[i].createTime;
                time=time.replaceAll("T"," ");
                time=time.replaceAll(".000+00:00","");
                str+=`
                        <tr>
                          <td class="text-center"><input type="checkbox" name="delList" value="${list[i].id}"></td>
                          <td>${i+1}</td>
                          <td><h2><a>${list[i].user}</a></h2></td>
                          <td style="color: deepskyblue">${list[i].song}</td>
                          <td style="color: deeppink">${list[i].comment}</td>
                          <td>${time}</td>
                          <td><div class="actions"><a href="javascript:void()" onclick="commentDel(${list[i].id})" class="btn btn-sm bg-danger-light"><i class="fas fa-trash"></i></a></div></td>
                        </tr>
                     `;
            }


            //定义一个分页
            let page=[];
            let before='#';
            let after='#';
            let pages='';
            if (res.data.pages>3 && res.data.current+2<=res.data.pages){
                page=[res.data.current,res.data.current+1,res.data.current+2];
            }else if (res.data.pages>3 && res.data.current+2>res.data.pages){
                page=[res.data.pages-2,res.data.pages-1,res.data.pages];
            }else {
                for (let i=0;i<res.data.pages;i++){
                    page[i]=i+1;
                }
            }
            for (let i=0;i<page.length;i++){
                pages+=`<li class="page-item"><a class="page-link" href="javascript:void(0)" onclick="commentPage(${page[i]},${size})">${page[i]}</a></li>`
            }
            if (res.data.current >1){
                before='commentPage('+(res.data.current-1)+','+size+')';
            }
            if (res.data.current<res.data.pages){
                after='commentPage('+(res.data.current+1)+','+size+')';
            }
            //定义分页结束
            //开始渲染数据
            $('#box').html(`
                <div class="page-header">
                  <div class="row align-items-center">
                    <div class="col">
                      <h3 class="page-title">评论信息</h3>
                      <ul class="breadcrumb">
                        <li class="breadcrumb-item"><a href="index.html">首页</a></li>
                        <li class="breadcrumb-item active">评论信息</li>
                      </ul>
                    </div>
                  </div>
                </div>
                
                
                <!-- /Page Header -->
                <div class="row">
                  <div class="col-sm-12">
                    <div class="card card-table">
                      <div class="card-body">
                        <div class="table-responsive">
                          <div class="top-nav-search">
                            <form onsubmit="return false">
                              <input type="text" class="form-control" placeholder="请输入歌名" id="searchComment" value="${msg}">
                              <button class="btn" onclick="commentPage(1,5)"><i class="fas fa-search"></i></button>
                            </form>
                          </div>
                          <table class="table table-hover table-center mb-0 datatable">
                            <thead>
                              <tr>
                                <th><a href="javascript:void(0)" onclick="commentDelIds()" class="btn btn-sm bg-danger-light"><span style="color: red">批量删除</span></i></th>
                                <th>ID</th>
                                <th>用户</th>
                                <th>歌曲</th>
                                <th>评论</th>
                                <th>时间</th>
                                <th>删除</th>
                              </tr>
                            </thead>
                            <tbody>
                                ${str}
                            </tbody>
                          </table>
                        </div>
                        <div style="text-align: right;margin-top: 20px">
                            <div style="float: left;display: inline-block">
                                总记录数: <span style="color: purple">${res.data.total} </span> ,
                                总页数: <span style="color: #0e72a2"> ${res.data.pages} </span>, 
                                当前页: <span style="color: red">${res.data.current}</span> 
                            </div>
                            <div style="display: inline-block;margin-right:100px">  
                                <nav aria-label="Page navigation example">
                                    <ul class="pagination">
                                      <li class="page-item">
                                        <a class="page-link" href="javascript:void(0)" onclick="${before}" aria-label="Previous">
                                          <span aria-hidden="true">&laquo;</span>
                                        </a>
                                      </li>
                                      ${pages}
                                      <li class="page-item" onclick="${after}">
                                        <a class="page-link" href="javascript:void(0)" onclick="${after}" aria-label="Next">
                                          <span aria-hidden="true">&raquo;</span>
                                        </a>
                                      </li>
                                    </ul>
                                </nav>
                            </div> 
                        </div> 
                      </div>
                    </div>
                  </div>
                </div>
            `);
            //渲染数据结束
        },
        error:()=>{
            alert("您的数据仿佛不存在")
        }
    })
}
//根据id删除评论
function commentDel(id) {
    $.ajax({
        url: '/admin/commentDel/'+id,
        type: 'delete',
        dataType: 'json',
        success:function (res) {
            commentPage(1,12);
        }
    })
}
//批量删除
function commentDelIds() {
    let list = document.getElementsByName("delList");
    console.log(list);
    let ids=[];
    for(var i=0;i<list.length;i++){
        if(list[i].checked == true){
            ids[ids.length]=list[i].value;
        }
    }
    $.ajax({
        url:'/admin/commentDelIds',
        type:'delete',
        data: {ids:ids},
        dataType:'json',
        success:(res)=>{
            commentPage(1,12);
        }
    })
}